<!--
 * @Author: luoqi
 * @Date: 2022-04-17 20:50:23
 * @LastEditors: luoqi
 * @LastEditTime: 2022-05-09 13:45:37
 * @Description: 
-->
<template>
  <div>
    <!-- 收藏疾病 -->
    <el-row class="illness Ctogether">
      <el-col :span="24">
        <p>收藏疾病</p>
        <div class="illness_one" v-if="illnessList.length > 0">
          <div>
            <span>共计：</span>
            <span class="numberTor">{{ illnessList.length }}</span>
          </div>
          <div>
            <span>最多部位类别：</span>
            <div class="imgTor">
              <!-- <img :src="require('@/assets/img-04.png')" alt="" /> -->
              <span>{{ partOption.xAxis.data[0] }}</span>
            </div>
          </div>
          <div>
            <span>最多科室类别：</span>
            <div class="imgTor">
              <!-- <img :src="require('@/assets/img-04.png')" alt="" /> -->
              <span>{{ divisionOption.xAxis.data[0] }}</span>
            </div>
          </div>
        </div>
        <div class="illness_two" v-if="illnessList.length > 0">
          <div id="part"></div>
          <div class="illness_three">
            <div>按部位</div>
          </div>
          <div id="division"></div>
          <div class="illness_three">
            <div></div>
            <div>按科室</div>
          </div>
        </div>
        <div v-else>
          <p style="color: #aaa; fontSize: 16px">还没有收藏疾病哦....</p>
        </div>
      </el-col>
    </el-row>
    <!-- 收藏历史记录 -->
    <el-row class="Ctogether">
      <el-col :span="24">
        <p>收藏历史记录</p>
        <el-row v-if="historyData.length > 0">
          <el-col :span="24">
            <el-row
              class="gugug"
              v-for="(item, index) in historyData"
              :key="index"
              v-if="index < 5"
            >
              <el-col :span="18">
                <el-row>
                  <el-col :span="3" class="height__60">
                    <i
                      v-if="item.typeName == '知识'"
                      :class="
                        'iconfontBox ' + 'bg_green ' + 'iconfont icon-zhishi'
                      "
                    ></i>
                    <i
                      v-else-if="item.typeName == '视频'"
                      :class="
                        'iconfontBox ' + 'bg_yellow ' + 'iconfont icon-video'
                      "
                    ></i>
                    <i
                      v-else-if="item.typeName == '疾病'"
                      :class="
                        'iconfontBox ' +
                        'bg_blue ' +
                        'iconfont icon-shiyuanxingjibing'
                      "
                    ></i>
                    <i
                      v-else
                      :class="
                        'iconfontBox ' +
                        'bg_blue ' +
                        'iconfont icon-gongzuojingyan'
                      "
                    ></i>
                  </el-col>
                  <el-col :span="19" class="text_headerline">
                    <div>{{ item.title }}</div>
                    <div>
                      <el-tag
                        type="success"
                        class="label"
                        v-for="(el, indexs) in item.tag && item.tag.split(',')"
                        :key="indexs + '2'"
                        >{{ el }}</el-tag
                      >
                    </div>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="6" class="dates">
                <span>{{ item.typeName }}</span>
                <span>{{ item.collectionTime }}</span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row v-if="historyData.length > 0">
          <router-link to="/main/MyHome/myhistory"
            ><el-col :span="3" class="more">更多...</el-col></router-link
          >
        </el-row>
        <div v-else>
          <p style="color: #aaa; fontSize: 16px">还没有收藏历史哦....</p>
        </div>
      </el-col>
    </el-row>
    <!-- 收藏疾病列表 -->
    <el-row class="Ctogether">
      <el-col :span="24">
        <p>收藏疾病列表</p>
        <div class="shoucangjibingliebiao" v-if="illnessList.length > 0">
          <router-link
            :to="{ name: 'DiseaseDetails', params: { id: item.targetId } }"
            v-for="(item, index) in illnessList"
            :key="index"
            v-if="index < 6"
          >
            <div class="illnessList">
              <div>{{ item.title }}</div>
              <div>
                <el-tag
                  type="success"
                  class="lable_s"
                  v-for="(el, index) in item.tag.split(',')"
                  :key="index"
                  >{{ el }}</el-tag
                >
              </div>
            </div>
          </router-link>
        </div>
        <el-row v-if="illnessList.length > 0">
          <router-link to="/main/MyHome/mydisease"
            ><el-col :span="3" class="more">更多...</el-col></router-link
          >
        </el-row>
        <div v-else>
          <p style="color: #aaa; fontSize: 16px">还没有收藏疾病哦....</p>
        </div>
      </el-col>
    </el-row>
    <!-- 收藏疾病视频 -->
    <el-row class="Ctogether">
      <el-col :span="24">
        <p>收藏疾病视频</p>
        <el-row v-if="videoList.length > 0">
          <el-col :span="24">
            <router-link
              :to="{ path: '/main/videodetail', query: { id: item.targetId } }"
              class="video"
              v-for="(item, index) in videoList"
              :key="index"
            >
              <div class="video_img">
                <i class="iconfont icon-24gf-playCircle"></i>
                <img :src="item.imgUrl" alt="" />
              </div>
              <div class="video_header">
                {{ item.title }}
              </div>
              <div class="video_label">
                <el-tag
                  type="success"
                  class="label"
                  v-for="(el, indexs) in item.tag.split(',')"
                  :key="indexs + '2'"
                  >{{ el }}</el-tag
                >
              </div>
            </router-link>
          </el-col>
        </el-row>
        <el-row v-if="videoList.length > 0">
          <router-link to="/main/MyHome/myvideo"
            ><el-col :span="3" class="more">更多...</el-col></router-link
          >
        </el-row>
        <div v-else>
          <p style="color: #aaa; fontSize: 16px">还没有收藏疾病视频哦....</p>
        </div>
      </el-col>
    </el-row>
    <!-- 收藏疾病知识 -->
    <el-row class="Ctogether">
      <el-col :span="24">
        <p>收藏疾病知识</p>
        <el-row v-if="knowledgeList.length > 0">
          <el-col :span="24">
            <router-link
              :to="{
                path: '/main/knowledgedetail',
                query: { id: item.targetId },
              }"
              class="video"
              v-for="(item, index) in knowledgeList"
              :key="index"
              v-if="index < 6"
            >
              <div class="video_img">
                <img :src="item.imgUrl" alt="" />
              </div>
              <router-link to="">
                <div class="video_header">
                  {{ item.title }}
                </div></router-link
              >
              <div class="video_label">
                <el-tag
                  type="success"
                  class="label"
                  v-for="(el, indexs) in item.tag.split(',')"
                  :key="indexs + '2'"
                  >{{ el }}</el-tag
                >
              </div>
            </router-link>
          </el-col>
        </el-row>
        <el-row v-if="knowledgeList.length > 0">
          <router-link to="/main/MyHome/myknowledeg"
            ><el-col :span="3" class="more">更多...</el-col></router-link
          >
        </el-row>
        <div v-else>
          <p style="color: #aaa; fontSize: 16px">还没有收藏疾病知识哦....</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Video from "../../views/Video.vue";
export default {
  props: ["id", "collection"],
  components: { Video },
  data() {
    return {
      partOption: {
        xAxis: {
          type: "category",
          axisLabel: {
            interval: 0,
          },
          data: ["头部", "颈部", "肩部", "胸部", "腹部", "腰部", "生殖器官"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 120, 200, 120, 300],
            type: "bar",
          },
        ],
      },
      // echart数据
      divisionOption: {
        xAxis: {
          type: "category",
          axisLabel: {
            interval: 0,
          },
          data: ["头部", "肩部", "生殖器官", "Thurs", "Fri", "Satur", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 120, 200, 120, 300],
            type: "bar",
          },
        ],
      },
      //收藏历史记录数据
      historyData: [],
      //收藏疾病列表
      illnessList: [],
      knowledgeList: [],
      videoList: [],
    };
  },
  mounted() {},
  // updated: function () {
  //   this.$nextTick(function () {
  //     //  仅在整个视图都被重新渲染之后才会运行的代码
  //     let div = document.getElementsByClassName("model_main_right_top")[0];
  //     let liaotian = document.getElementById("liaotian");
  //     div.scrollTop = liaotian.offsetHeight;
  //   });
  // },
  //他人主页监听收藏信息
  watch: {
    collection: {
      handler(newData, old) {
        // console.log(newData)
        if (newData.historyList) {
          this.setAllData(newData);
        }
      },
      immediate: true,
    },
  },
  methods: {
    setAllData(data) {
      this.historyData = data.historyList;
      this.knowledgeList = data.knowledgeList;
      this.videoList = data.videoList;
      this.illnessList = data.sicknessList;
      //部位echarts
      if ((data.partCount && data.partCount.length) > 0) {
        this.partOption.xAxis.data = data.partCount.map((item) => item.name);
        this.partOption.series[0].data = data.partCount.map(
          (item) => item.value
        );
      }
      if ((data.departmentCount && data.departmentCount.length) > 0) {
        //科室echarts
        this.divisionOption.xAxis.data = data.departmentCount.map(
          (item) => item.name
        );
        this.divisionOption.series[0].data = data.departmentCount.map(
          (item) => item.value
        );
        setTimeout(() => {
          this.createEchart();
        }, 2000);
      }
    },
    redact() {
      //跳转编辑资料路由
    },
    //关注和私信 index：1为关注，2位私信
    tagesClick(index) {
      if (index === 2) {
        this.dialogVisible = true;
      }
    },
    createEchart() {
      let partChart = this.$echarts.init(document.getElementById("part"));
      partChart.setOption(this.partOption);
      let divisionChart = this.$echarts.init(
        document.getElementById("division")
      );
      divisionChart.setOption(this.divisionOption);
    },
    //发送信息
    btnSend() {
      if (this.form.text.trim().length !== 0) {
        this.mySide.push(this.form.text);
        this.form.text = "";
      } else {
        const h = this.$createElement;
        this.$notify({
          title: "提示",
          message: "信息不能为空",
          duration: 1000,
          position: "bottom-right",
        });
      }
    },
    liaotianList(index) {
      this.active = index;
      this.frame = this.sideList[index];
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../less/myhome.less");
</style>